/* reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, header, section, aside, nav, menu, hgroup, audio, video, figure, figcaption, footer, article {
    margin: 0;
    padding: 0;
}
address, caption, cite, code, dfn, em, th, var, optgroup {
    font-style: inherit;
    font-weight: inherit;
}
body, input, button, textarea, select {
    *font-size: 100%;
    outline: none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
fieldset, img {
    border: 0;
}
caption, th {
    text-align: left;
}
textarea {
    resize: none;
    outline: none;
}
input{
    -webkit-appearance:none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
em {
    font-style: normal;
}
a{
    text-decoration:none;
}
li {
    list-style: none;
}
body{
    font: normal 18px/1.5 -apple-system, "Helvetica Neue", Arial, "PingFang SC", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
html,body{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    height:100%;
    overflow:hidden;
    background:#000;
}
.cam{
    width:60px;
    height:80px;
    position:absolute;
    right:38px;
    bottom:144px;
}
.screen{
    background:#000;
    width:422px;
    height:740px;
    margin:128px auto 0;
    position:relative!important;
    border-radius:3px;
    overflow:hidden;
    transform:scale(0);
    opacity:0;
    transform-origin:100% 100%;
    transition:all .5s;
}
.screen.show{
    opacity:1;
    transform:scale(1);
}
.screen video{
    width:100%;
}
.tips{
    color:rgba(255,255,255,0.5);
    top:50%;
    -webkit-transform:translateY(-50%);
    position:absolute;
    left:50%;
    line-height:1.5;
    margin-left:-420px;
    font-size:16px;
}
.scene{
    height:100%;
    perspective:2000px;
    -webkit-transition:-webkit-transform .3s;
}
.phone{
    -webkit-transform-style:preserve-3d;
    width:456px;
    height:1000px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    margin:auto;
}
.phone div{
    -webkit-transform-style:preserve-3d;
    position:absolute;
}
.phone .left{
    background:url(../images/left.png) no-repeat;
    width:22px;
    height:1000px;
    -webkit-transform-origin:left center;
    -webkit-transform:translateZ(4px) translateX(6px) rotateY(-90deg);
    box-sizing:border-box;
    padding:80px 0;
    background-clip:content-box;
}
.phone .left .ltt,
.phone .left .ltb{
    background:url(../images/left.png) no-repeat;
    width:22px;
    height:10px;
    position:absolute;
    bottom:100%;
    transform-origin:50% 100%;
}
.phone .left .ltb{
    transform-origin:50% 0%;
    top:100%;
}
.phone .left .ltt-1{
    background-position:0 -70px;
    top:70px;
    bottom:auto;
}
.phone .left .ltt-2{
    background-position:0 -60px;
    transform:rotateX(20deg);
}
.phone .left .ltt-3{
    background-position:0 -50px;
    transform:rotateX(15deg);
}
.phone .left .ltt-4{
    background-position:0 -40px;
    transform:rotateX(15deg);
    -webkit-mask-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1));
}
.phone .left .ltb-1{
    background-position:0 -920px;
    bottom:70px;
    top:auto;
}
.phone .left .ltb-2{
    background-position:0 -930px;
    transform:rotateX(-20deg);
}
.phone .left .ltb-3{
    background-position:0 -940px;
    transform:rotateX(-15deg);
}
.phone .left .ltb-4{
    background-position:0 -950px;
    transform:rotateX(-15deg);
    -webkit-mask-image: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0));
}

.phone .right{
    background:url(../images/right.png) no-repeat 100% 0;
    width:22px;
    height:1000px;
    -webkit-transform-origin:right center;
    position:absolute;
    right:0;
    -webkit-transform:translateZ(4px) translateX(-6px) rotateY(90deg);
    box-sizing:border-box;
    padding:80px 0;
    background-clip:content-box;
}
.phone .right .rtt,
.phone .right .rtb{
    background:url(../images/right.png) no-repeat;
    width:22px;
    height:10px;
    position:absolute;
    bottom:100%;
    transform-origin:50% 100%;
}
.phone .right .rtb{
    transform-origin:50% 0%;
    top:100%;
}
.phone .right .rtt-1{
    background-position:100% -70px;
    top:70px;
    bottom:auto;
    transform:rotateX(5deg);
}
.phone .right .rtt-2{
    background-position:100% -60px;
    transform:rotateX(10deg);
}
.phone .right .rtt-3{
    background-position:100% -50px;
    transform:rotateX(15deg);
}
.phone .right .rtt-4{
    background-position:100% -40px;
    transform:rotateX(20deg);
    -webkit-mask-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1));
}
.phone .right .rtb-1{
    background-position:100% -920px;
    bottom:70px;
    top:auto;
    transform:rotateX(-5deg);
}
.phone .right .rtb-2{
    background-position:100% -930px;
    transform:rotateX(-10deg);
}
.phone .right .rtb-3{
    background-position:100% -940px;
    transform:rotateX(-15deg);
}
.phone .right .rtb-4{
    background-position:100% -950px;
    transform:rotateX(-20deg);
    -webkit-mask-image: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0));
}


.phone .front{
    -webkit-mask : url(../images/front.png) no-repeat;
    background:url(../images/front.png) no-repeat;
    width:456px;
    height:1000px;
    -webkit-transform:translateZ(27px) scaleX(0.976);
}
.phone .back{
    width:456px;
    height:1000px;
    -webkit-transform:rotateY(180deg) translateZ(25px);
}
.phone .back .bg{
    background:url(../images/back.png) no-repeat;
}
.phone .back .ct{
    background-position:50% 0;
    width:122px;
    height:1000px;
    position:absolute;
    left:167px;
}
.phone .back .lp{
    -webkit-transform-origin:right center;
    width:44px;
    height:1000px;
    position:absolute;
    -webkit-transform:rotateY(-4.2deg);
}
.phone .back .lt-1{
    background-position:-126px 0;
    position:absolute;
    left:126px;

}
.phone .back .lt-2{
    background-position:-84px 0;
    right:42px;
}
.phone .back .lt-3{
    background-position:-42px 0;
    right:42px;
}
.phone .back .lt-4{
    background-position:0 0;
    right:42px;
}
.phone .back .rp{
    -webkit-transform-origin:left center;
    width:44px;
    height:1000px;
    position:absolute;
    -webkit-transform:rotateY(4.2deg);
}
.phone .back .rt-1{
    background-position:-288px 0;
    position:absolute;
    left:288px;
}
.phone .back .rt-2{
    background-position:-330px 0;
    left:42px;
}
.phone .back .rt-3{
    background-position:-372px 0;
    left:42px;
}
.phone .back .rt-4{
    background-position:-414px 0;
    left:42px;
    width:40px;
}

.phone .top{
    -webkit-backface-visibility:hidden;
    width:456px;
    height:54px;
    position:absolute;
    top:-26px;
    -webkit-transform:rotateX(90deg);
}

.phone .top .tp-1,
.phone .top .tp-2{
    width:228px;
    height:54px;
    position:absolute;
}

.phone .top .tp-1{
    background:url(../images/top.png) no-repeat;
    -webkit-transform-origin:200px 0%;
    -webkit-transform:rotateY(-12deg);
    background-clip:content-box;
    box-sizing:border-box;
    padding-right:48px;
    padding-left:78px;
}

.phone .top .tpl,
.phone .top .tpr{
    background:url(../images/top.png) no-repeat;
    position:absolute;
    height:54px;
    transform-origin:100% 0;
    margin-right:-1px;
}
.phone .top .tpr{
    transform-origin:0 0;
    margin-left:-1px;
}
.phone .top .tpl-1{
    background-position:-40px 0;
    width:40px;
    left:40px;
    transform:rotateY(-5deg);
}
.phone .top .tpl-2{
    background-position:-30px 0;
    width:12px;
    right:100%;
    transform:rotateY(-4deg);
}
.phone .top .tpl-3{
    background-position:-20px 0;
    width:12px;
    right:100%;
    transform:rotateY(-6deg);
}
.phone .top .tpl-4{
    background-position:-10px 0;
    width:12px;
    right:100%;
    transform:rotateY(-10deg);
}
.phone .top .tpl-5{
    background-position:0 0;
    width:12px;
    right:100%;
    transform:rotateY(-20deg);
}

.phone .top .tpr-1{
    background-position:-376px 0;
    width:40px;
    right:40px;
    transform:rotateY(5deg);
}
.phone .top .tpr-2{
    background-position:-416px 0;
    width:12px;
    left:100%;
    transform:rotateY(4deg);
}
.phone .top .tpr-3{
    background-position:-426px 0;
    width:12px;
    left:100%;
    transform:rotateY(6deg);
}
.phone .top .tpr-4{
    background-position:-436px 0;
    width:12px;
    left:100%;
    transform:rotateY(10deg);
}
.phone .top .tpr-5{
    background-position:-446px 0;
    width:12px;
    left:100%;
    transform:rotateY(20deg);
}


.phone .top .tp-2{
    -webkit-transform-origin:28px 0%;
    background:url(../images/top.png) no-repeat 100% 0;
    -webkit-transform:rotateY(12deg);
    right:0;
    background-clip:content-box;
    box-sizing:border-box;
    padding-left:48px;
    padding-right:78px;
}

.phone .top .ld{
    background:url(../images/top-rad.png) no-repeat -220px 0;
    position:absolute;
    width:14px;
    height:54px;
}
.phone .top .ld-1{
    right:228px;
    -webkit-transform:rotateY(-0.2deg);
}
.phone .top .ld-2,
.phone .top .ld-3,
.phone .top .ld-4{
    right:12px;
    -webkit-transform-origin:right center;
}
.phone .top .ld-2{
    -webkit-transform:rotateY(-4.6deg);
    background-position:-208px 0;
}
.phone .top .ld-3{
    -webkit-transform:rotateY(-3.2deg);
    background-position:-196px 0;
}
.phone .top .ld-4{
    background-position:-184px 0;
    -webkit-transform:rotateY(.2deg);
}


.phone .top .rd{
    background:url(../images/top-rad.png) no-repeat -236px 0;
    position:absolute;
    width:13px;
    height:54px;
}
.phone .top .rd-1{
    left:228px;
    -webkit-transform:rotateY(0.2deg);
}
.phone .top .rd-2,
.phone .top .rd-3,
.phone .top .rd-4{
    left:12px;
    -webkit-transform-origin:left center;
}
.phone .top .rd-2{
    -webkit-transform:rotateY(4.6deg);
    background-position:-248px 0;
}
.phone .top .rd-3{
    -webkit-transform:rotateY(3.2deg);
    background-position:-260px 0;
}
.phone .top .rd-4{
    background-position:-272px 0;
    -webkit-transform:rotateY(-0.2deg);
}



.phone .bottom{
    -webkit-backface-visibility:hidden;
    width:456px;
    height:54px;
    position:absolute;
    bottom:-26px;
    -webkit-transform:rotateX(-90deg);
}
.phone .bottom .bt-1,
.phone .bottom .bt-2{
    width:228px;
    height:54px;
    position:absolute;
}



.phone .bottom .bt-1{
    -webkit-transform-origin:200px 0%;
    background:url(../images/bottom.png) no-repeat;
    -webkit-transform:rotateY(-12deg);
    background-clip:content-box;
    box-sizing:border-box;
    padding-right:48px;
    padding-left:80px;
}

.phone .bottom .bt-2{
    -webkit-transform-origin:28px 0%;
    background:url(../images/bottom.png) no-repeat 100% 0;
    -webkit-transform:rotateY(12deg);
    right:0;
    background-clip:content-box;
    box-sizing:border-box;
    padding-left:48px;
    padding-right:80px;
}
.phone .bottom .btl,
.phone .bottom .btr{
    background:url(../images/bottom.png) no-repeat;
    position:absolute;
    height:54px;
    transform-origin:100% 0;
    margin-right:-1px;
}
.phone .bottom .btr{
    transform-origin:0 0;
    margin-left:-1px;
}
.phone .bottom .btl-1{
    background-position:-40px 0;
    width:40px;
    left:40px;
    transform:rotateY(-5deg);
}
.phone .bottom .btl-2{
    background-position:-30px 0;
    width:12px;
    right:100%;
    transform:rotateY(-4deg);
}
.phone .bottom .btl-3{
    background-position:-20px 0;
    width:12px;
    right:100%;
    transform:rotateY(-6deg);
}
.phone .bottom .btl-4{
    background-position:-10px 0;
    width:12px;
    right:100%;
    transform:rotateY(-10deg);
}
.phone .bottom .btl-5{
    background-position:0 0;
    width:12px;
    right:100%;
    transform:rotateY(-20deg);
}

.phone .bottom .btr-1{
    background-position:-376px 0;
    width:40px;
    right:41px;
    transform:rotateY(5deg);
}
.phone .bottom .btr-2{
    background-position:-416px 0;
    width:12px;
    left:100%;
    transform:rotateY(4deg);
}
.phone .bottom .btr-3{
    background-position:-426px 0;
    width:12px;
    left:100%;
    transform:rotateY(6deg);
}
.phone .bottom .btr-4{
    background-position:-436px 0;
    width:12px;
    left:100%;
    transform:rotateY(10deg);
}
.phone .bottom .btr-5{
    background-position:-446px 0;
    width:12px;
    left:100%;
    transform:rotateY(20deg);
}


.phone .bottom .ld{
    background:url(../images/bottom.png) no-repeat -220px 0;
    position:absolute;
    width:13px;
    height:54px;
}
.phone .bottom .ld-1{
    right:228px;
    -webkit-transform:rotateY(-0.2deg);
}
.phone .bottom .ld-2,
.phone .bottom .ld-3,
.phone .bottom .ld-4{
    right:12px;
    -webkit-transform-origin:right center;
}
.phone .bottom .ld-2{
    -webkit-transform:rotateY(-4.6deg);
    background-position:-208px 0;
}
.phone .bottom .ld-3{
    -webkit-transform:rotateY(-3.2deg);
    background-position:-196px 0;
}
.phone .bottom .ld-4{
    background-position:-184px 0;
    -webkit-transform:rotateY(.2deg);
}


.phone .bottom .rd{
    background:url(../images/bottom.png) no-repeat -236px 0;
    position:absolute;
    width:13px;
    height:54px;
}
.phone .bottom .rd-1{
    left:228px;
    -webkit-transform:rotateY(0.2deg);
}
.phone .bottom .rd-2,
.phone .bottom .rd-3,
.phone .bottom .rd-4{
    left:12px;
    -webkit-transform-origin:left center;
}
.phone .bottom .rd-2{
    -webkit-transform:rotateY(4.6deg);
    background-position:-248px 0;
}
.phone .bottom .rd-3{
    -webkit-transform:rotateY(3.2deg);
    background-position:-260px 0;
}
.phone .bottom .rd-4{
    background-position:-272px 0;
    -webkit-transform:rotateY(-0.2deg);
}
